import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text,Button,Input } from '@tarojs/components';
import { AtButton,AtAvatar, AtModal, AtModalHeader, AtModalContent, AtModalAction,AtInput  } from 'taro-ui';
import './mineziliao.scss'
class Mineziliao extends Component {
    constructor(props){
        super(props),
        this.state={
          isOpen:false,
          name:'',
          isOpen1:false
        }
      }
    onReady () {
      console.log('onReady')
    }
    handleClose=()=>{
        this.setState({isOpen:false,isOpen1:false})
    }
    handleCancel=()=>{
        this.setState({isOpen:false,isOpen1:false})
    }
    handleConfirm=()=>{
        this.setState({
            isOpen:false,
            isOpen1:false
        })
    }
    gotomine(){
      Taro.switchTab({
        url: '/pages/mine/mine'
      })
    }
    render () {
      return <View className='container'>
          <View className='toptou'>
             <View className='touxiang' style='font-size:18px '>
              <Text>头像</Text>
              <AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>
              </View>
          </View>
          <View className='nicheng'>
             <View className='nicheng1' style='font-size:18px '>
              <Text>昵称</Text>
              <Text className='nicheng2'>不知道先生</Text>
              </View>
          </View> 
          <View className='sex'>
             <View className='sex1' style='font-size:18px '>
              <Text>性别</Text>
              <Text className='sex2'>男</Text>
              </View>
          </View> 
          <View className='name'>
             <View className='name1' style='font-size:18px '>
              <Text>姓名</Text>
              <Text className='name2' onClick={()=>this.setState({isOpen:true})}>未绑定&gt;</Text>
              </View>
          </View> 
          <View className='phone'>
             <View className='phone1' style='font-size:18px '>
              <Text>手机号码</Text>
              <Text className='phone2' onClick={()=>this.setState({isOpen1:true})}>未绑定&gt;</Text>
          </View>  
          </View>
          <View className='btn'>
          <AtButton className='btnsubmit' onClick={this.gotomine}>更新信息</AtButton>
          </View> 
<AtModal
  isOpened={this.state.isOpen}
>
<AtModalHeader>设置姓名</AtModalHeader>
  <AtModalContent>
  姓名：<Input type='text' placeholder='请输入姓名' focus  />
  </AtModalContent>
  <AtModalAction> <Button onClick={ this.handleCancel }>取消</Button> <Button onClick={ this.handleConfirm }>确定</Button> </AtModalAction>
</AtModal>
<AtModal
  isOpened={this.state.isOpen1}
>
<AtModalHeader>设置手机号码</AtModalHeader>
  <AtModalContent>
  手机号码：<Input type='text' placeholder='请输入手机号码' focus  />
  </AtModalContent>
  <AtModalAction> <Button onClick={ this.handleCancel }>取消</Button> <Button onClick={ this.handleConfirm }>确定</Button> </AtModalAction>
</AtModal>
          </View>
          
    }
  }
  
  export default Mineziliao